<template>
  <div>
  <header id="header" class="">
    hello
  </header>
    <divider>{{('A Vertical Scroller') }} scrollTop: {{scrollTop}}</divider>
    <scroller lock-x scrollbar-y  @on-scroll="onScroll" bounce use-pullup @on-pullup-loading="pullup" ref="scrollerEvent" height="-110" :pullup-config="config" donePullup>
      <div class="box2">
        <p v-for="i in num">placeholder {{i}}</p>
        {{date}}<br>
        {{query}}<br>
        {{string}}
      </div>
    </scroller>
    <div style="height:40px;line-height: 40px;width:100%;background:#fff">132</div> 

    
  </div>
</template>



<script>
import { Scroller, Divider, dateFormat, querystring, cookie , stringTrim } from 'vux'

export default {
  components: {
    Scroller,
    Divider
  },
  data () {
    return {
      date:'',
      query:'',
      string:'',
      showList1: true,
      scrollTop: 0,
      num:10,
      config:{
        content: '上拉刷新',
        pullUpHeight: 100,
        height: 100,
        autoRefresh: true,
        downContent: '释放刷新',
        upContent: '上拉刷新',
        loadingContent: '加载更多',
        clsPrefix: 'xs-plugin-pullup-'
      }
    }
  },
  mounted () {
    this.date = dateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss')
    this.query = querystring.parse('a=b&c=d')
    this.string = querystring.stringify(this.query)
    // cookie
    document.cookie = 'username=十九世纪'
    document.cookie = 'password=123456'
    console.log(cookie.get('username'))
    console.log(cookie.get('password', function(s) { return parseInt(s); } ))
    console.log(stringTrim('45564615'))
    this.$nextTick(() => {
      this.$refs.scrollerEvent.reset({top: 0})
    })
  },
  methods: {
    onScroll (pos) {
      console.log('on scroll', pos)
      this.scrollTop = pos.top
    },
    pullup(){
      console.log(1)
      this.num+=10
      this.$nextTick(() => {
      this.$refs.scrollerEvent.reset({})
      this.$refs.scrollerEvent.donePullup()
      if(this.num>100){
        this.$refs.scrollerEvent.disablePullup()
      }
    })
    }
  }
}
</script>

<style scoped>
.box1 {
  height: 100px;
  position: relative;
  width: 1490px;
}
.box1-item {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  display:inline-block;
  margin-left: 15px;
  float: left;
  text-align: center;
  line-height: 100px;
}
.box1-item:first-child {
  margin-left: 0;
}
.box2-wrap {
  height: 300px;
  overflow: hidden;
}
</style>